<template>
    <div class="com_container">
        <div class="com_chart" ref="stock_ref">
        </div>
    </div>
</template>

<script>
// // 引入主题
// require('../../public/static/theme/chalk')
// require('../../public/static/theme/vintage')
import { mapState } from 'vuex'
export default {
    // 组件名称
    name: 'stockChart',
    data() {
        return {
            chartInstance: null,
            allData: null,
            titleFontSize: 0,
            currentIndex: 0,
            timeId: null,
            loading: null
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme() {
            console.log('zhuti');
            this.chartInstance.dispose()
            this.initChart()
            this.adapter()
            this.updateChart()
        }
    },
    methods: {
        // 初始化echarts实例对象
        async initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.stock_ref, this.theme)
            // 对图表初始化配置
            const initOption = {
                title: {
                    text: '库存销量分析',
                    fontSize: this.titleFontSize,
                    left: 20,
                    top: 5
                },
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取服务器数据
        getData(ret) {
            // ws调用getData的时候自动传入图标数据当作形参
            this.allData = ret
            this.updateChart()
            this.startInterval()
        },
        // 更新图表
        updateChart() {
            const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%']
            ]
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF']
            ]
            const start = this.currentIndex * 5
            const end = (this.currentIndex + 1) * 5
            const showData = this.allData.slice(start, end)
            const seriesArr = showData.map((item, index) => {
                return {
                    type: 'pie',
                    center: centerArr[index],
                    data: [
                        {
                            name: item.name + '\n\n' + item.sales,
                            value: item.sales,
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: colorArr[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[index][1]
                                    }
                                ])
                            }
                        },
                        {
                            value: item.stock,
                            itemStyle: {
                                color: '#333843'
                            }

                        }
                    ],
                    // 取消鼠标动画
                    emphasis: {
                        scale: false,
                    },
                    label: {
                        position: 'outside',
                        offset:[-10,0],
                        color: colorArr[index][0]
                    },
                    avoidLabelOverlap: false,
                }
            })
            const dataOption = {
                series: seriesArr
            }
            if (this.loading) {
                this.loading.close()
            }
            this.chartInstance.setOption(dataOption)
        },
        // 自适应配置更新
        adapter() {
            this.titleFontSize = document.body.clientWidth / 100 * 1.15
            const innerRadius = this.titleFontSize * 1.5
            const outterRadius = this.titleFontSize * 0.7
            const adapterOption = {
                title: {
                    fontSize: this.titleFontSize
                },
                series: [
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: this.titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: this.titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: this.titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: this.titleFontSize / 2
                        }
                    },
                    {
                        type: 'pie',
                        radius: [outterRadius, innerRadius],
                        label: {
                            fontSize: this.titleFontSize / 2
                        }
                    },
                ]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        startInterval() {
            if (this.timeId) {
                clearInterval(this.timeId)
            }
            this.timeId = setInterval(() => {
                this.currentIndex++
                if (this.currentIndex > Math.floor(this.allData.length / 5) - 1) {
                    this.currentIndex = 0
                }
                this.updateChart()
            }, 5000)
        }
    },
    created() {
        // 注册回调函数
        this.$scoket.registerCallBack('stockData', this.getData)
    },
    mounted() {
        this.initChart()
        this.loading = this.$loading({
            target: this.$refs.stock_ref,
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        // 获取数据需要使用客户端向服务端发送数据来获取
        this.$scoket.send({
            // 指明此次获取的信息
            action: 'getData',
            socketType: 'stockData',
            chartName: 'stock',
            value: ''
        })
        window.addEventListener('resize', this.adapter)
        this.adapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.adapter)
        clearInterval(this.timeId)
        // 注销回调函数
        this.$scoket.unregisterCallBack('stockData')

    },
}
</script> 

<style scoped lang='less'>

</style>
